<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top" v-model="defaultTab" @tab-click="tabSwitch">
				<el-tab-pane label="系统配置"  v-if="this.$TOOL.auth.verification(['params:system'])" name="systemParams">
					<el-row v-loading="loading">
						<el-col :span="10">
							<el-form ref="form" :model="sys" label-width="100px" style="margin-top: 20px;">
								<el-form-item label="系统标志" id="logoAccessUrlStyle">
									<sc-upload width="146" height="146" v-model="sys.logoAccessUrl" title="上传图片" :cropper="true" :compress="1" :aspectRatio="1/1"></sc-upload>
								</el-form-item>
								<el-form-item label="系统名称">
									<el-input v-model="sys.systemName"></el-input>
								</el-form-item>
								<el-form-item label="登录开关">
									<el-switch v-model="sys.loginSwitch"></el-switch>
									<div class="el-form-item-msg" data-v-b33b3cf8="">关闭后普通用户无法登录，仅允许管理员角色登录</div>
								</el-form-item>
								<el-form-item label="登陆页横幅" id="uploadPictureStyle">
									<sc-upload width="146" height="228" :apiObj="$API.system.params.uploadPicture" v-model="sys.authBannerAccessUrl"
											   title="上传图片" :cropper="true" :compress="1" :aspectRatio="0.52/1"></sc-upload>
								</el-form-item>
								<el-form-item label="登陆页标题">
									<el-input type="textarea" :autosize="{minRows: 3}" v-model="sys.title" placeholder="支持Text文本或Html"></el-input>
								</el-form-item>
								<el-form-item label="登陆页标语">
									<el-input type="textarea" :autosize="{minRows: 3}" v-model="sys.slogan" placeholder="支持Text文本或Html"></el-input>
								</el-form-item>
								<el-form-item label="登陆页描述">
									<el-input type="textarea" :autosize="{minRows: 3}" v-model="sys.describe" placeholder="支持Text文本或Html"></el-input>
								</el-form-item>
								<el-form-item label="版权信息">
									<el-input type="textarea" :autosize="{minRows: 3}" v-model="sys.copyrightInfo" placeholder="支持Text文本或Html"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="saveSystemParams" :loading="isSaveing">保存</el-button>
								</el-form-item>
							</el-form>
						</el-col>

						<el-col :span="14">

						</el-col>
					</el-row>
				</el-tab-pane>

				<el-tab-pane label="NACOS配置"  v-if="this.$TOOL.auth.verification(['params:nacos'])" name="nacosParams">
					<el-row v-loading="nacosLoading">
						<el-col :span="12">
							<el-table :data="nacosList" stripe height="655" @row-click="nacosDetails" highlight-current-row>
								<el-table-column label="ID" prop="id" width="180"></el-table-column>
								<el-table-column label="Data Id" prop="dataId" width="230"></el-table-column>
								<el-table-column label="Group" prop="group" min-width="70"></el-table-column>
								<el-table-column label="配置格式" prop="type" min-width="50"></el-table-column>
								<el-table-column label="操作" fixed="right" width="82">
									<template #default="scope">
										<el-button-group>
											<el-button style="padding-left:0px" text type="primary" size="small">详情</el-button>
											<el-button style="padding-left:0px;padding-right:0px" text type="primary" size="small"  @click="nacosDelete(scope.row)">删除</el-button>
										</el-button-group>
									</template>
								</el-table-column>
							</el-table>
							<el-button type="success" style="width:100%" @click="nacosAdd">+</el-button>
						</el-col>
						<el-col :span="12" style="padding-left:20px">
							<el-descriptions :column="1" border size="small">
								<el-descriptions-item  label="Data ID"><div style="width: 580px">{{nacosInfo.dataId}}</div></el-descriptions-item>
								<el-descriptions-item  label="Group"><div style="width: 580px">{{nacosInfo.group}}</div></el-descriptions-item>
								<el-descriptions-item  label="配置格式"><div style="width: 580px">{{nacosInfo.type}}</div></el-descriptions-item>
								<el-descriptions-item  label="配置内容">
									<div class="nacosContent" style="position: relative;width: 580px" v-loading="nacosSaveLoading">
										<el-button v-if="startEdit && nacosInfo.group"  style="position: absolute; top: 3px; right: 50px; color:#999" text type="primary" size="small" @click="nacosCancel">取消</el-button>
										<el-button v-if="startEdit && nacosInfo.group"  style="position: absolute; top: 3px; right: 3px; color:#999" text type="primary" size="small" @click="nacosSave">发布</el-button>
										<el-button v-else-if="!startEdit && nacosInfo.group" class="showOrHide" style="position: absolute; top: 3px; right: 3px; color:#999;" text type="primary" size="small" @click="nacosEdit">编辑</el-button>
										<textarea v-if="startEdit" v-model="nacosInfo.content" style="width:100%;height: 574px;
											font-size: 12px;color: #aaa;padding-left:6px;background: #000000;font-family: consolas;line-height: 1.5;word-break:break-all;">
										</textarea>
										<textarea v-else readonly v-model="nacosInfo.content" style="width:100%;height: 574px;
											font-size: 12px;color: #999;padding-left:6px;background: #1e1e1e;font-family: consolas;line-height: 1.5;word-break:break-all;">
										</textarea>
									</div>
								</el-descriptions-item>
							</el-descriptions>
						</el-col>
					</el-row>
				</el-tab-pane>

				<el-tab-pane label="扩展配置"  v-if="this.$TOOL.auth.verification(['params:other'])" name="otherParams">
					<el-table :data="setting" stripe>
						<el-table-column label="序号" type="index" width="70"></el-table-column>
						<el-table-column label="类别" prop="category" width="160">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.category" placeholder="请输入内容"></el-input>
								<span v-else>{{scope.row.category}}</span>
							</template>
						</el-table-column>
						<el-table-column label="键" prop="key" width="160">
							<template #default="scope">
								<el-input v-if="scope.row.isSet" v-model="scope.row.key" placeholder="请输入内容" ></el-input>
								<span v-else>{{scope.row.key}}</span>
							</template>
						</el-table-column>
						<el-table-column label="值类型" prop="type" width="160">
							<template #default="scope">
								<template v-if="scope.row.isSet">
									<el-select v-model="scope.row.type" class="m-2">
										<el-option label="json" value="json" />
										<el-option label="txt" value="txt" />
										<el-option label="xml" value="xml" />
									</el-select>
								</template>
								<span v-else>{{scope.row.type}}</span>
							</template>
						</el-table-column>
						<el-table-column label="值" prop="value" width="430">
							<template #default="scope">
								<template v-if="scope.row.isSet">
									<el-input type="textarea" v-model="scope.row.value" placeholder="" ></el-input>
								</template>
								<span v-else>{{scope.row.value}}</span>
							</template>
						</el-table-column>
						<el-table-column label="描述" prop="title">
							<template #default="scope">
								<el-input v-if="scope.row.isSet"  type="textarea" v-model="scope.row.title" placeholder="" ></el-input>
								<span v-else>{{scope.row.title}}</span>
							</template>
						</el-table-column>
						<el-table-column min-width="1"></el-table-column>
						<el-table-column label="操作" fixed="right" width="120">
							<template #default="scope">
								<el-button-group>
									<el-button @click="table_edit(scope.row)" text type="primary" size="small">{{scope.row.isSet?'保存':"修改"}}</el-button>
									<el-button v-if="scope.row.isSet" @click="cancel(scope.row)" text type="primary" size="small">取消</el-button>
									<el-popconfirm v-if="!scope.row.isSet" title="确定删除吗？" @confirm="table_del(scope.row)">
										<template #reference>
											<el-button text type="primary" size="small">删除</el-button>
										</template>
									</el-popconfirm>
								</el-button-group>
							</template>
						</el-table-column>
					</el-table>
					<el-button type="primary" icon="el-icon-plus" @click="table_add" style="margin-top: 20px;"></el-button>
				</el-tab-pane>
			</el-tabs>
		</el-card>

	</el-main>

	<!-- nacos新增页面 -->
	<save-dialog v-if="showNacosAddPage" ref="saveDialog" @success="getNacosList" @closed="showNacosAddPage=false"></save-dialog>

</template>

<script>
	import scCropper from '@/components/scCropper'
	import saveDialog from './save'

	export default {
		name: 'params',
		components: {
			scCropper,
			saveDialog
		},
		data() {
			return {
				defaultTab: "systemParams",

				// 系统配置
				loading: false,
				sys: {
					systemName: "",  //系统名称
					logoAccessUrl: "", //系统logo AccessUrl
					logoUrl: "", // 系统logo
					loginSwitch: true, //登陆开关
					copyrightInfo: "",  //版权信息
					authBanner: "",  //登陆页横幅 url
					authBannerAccessUrl: "", //登陆页横幅 AccessUrl
					title: "", //登陆页标题
					slogan: "", //登陆页标语
					describe: "", //登陆页描述
				},
				sysSsSaveing: false,
				msg: {
					open: true,
				},

				// Nacos配置
				nacosLoading: false,
				nacosList: [],
				nacosInfo: {},
				showNacosAddPage: false,
				nacosInfoBackups: {},
				startEdit: false,
				nacosSaveLoading: false,


				// 其他配置
				otherLoading: false,
				setting: []
			}
		},
		created() {
			this.getSystemParamsInfo();
			window.onresize = () => {
				return (() => {
					// 监听浏览器宽高变化
					this.headerHeight = this.$TOOL.page.updateHeight();
				})()
			}
		},
		methods: {

			/**
			 * 切换tab事件
			 * @param tab
			 */
			tabSwitch(tab){
				this.nacosList = []
				this.nacosInfo = {}
				this.nacosInfoBackups = {}
				this.nacosLoading= false
				this.startEdit= false
				this.nacosSaveLoading= false

				if (tab.props.name == 'systemParams') {
					this.getSystemParamsInfo();
					return
				}
				if (tab.props.name == 'nacosParams') {
					this.getNacosList();
					return
				}
				if (tab.props.name == 'otherParams') {
					this.getOtherList();
					return
				}
			},

			/*************************** 系统配置 ***************************/
			/**
			 * 获取系统配置信息
			 */
			async getSystemParamsInfo(){
				this.loading = true
				let res = await this.$API.system.params.getSystemConfigureInfo.get();
				this.loading = false
				if (res.status != 200) {
					return
				}
				this.sys = res.data
			},

			/**
			 * 保存系统参数
			 */
			async saveSystemParams() {
				this.loading = true
				this.sysSsSaveing = true
				var headPortrait = this.sys.authBannerAccessUrl;
				if (this.sys.authBannerAccessUrl) {
					let fileId = "";
					let paths = headPortrait.split("/");
					let len = 4;
					for (let i = paths.length - 1; i > 0 && len > 0; i--, len--) {
						if (len == 1) {
							fileId = paths[i] + fileId;
							continue;
						}
						fileId = "/" + paths[i] + fileId;
					}
					let indexOf = fileId.indexOf("?");
					if (indexOf != -1) {
						fileId = fileId.substring(0, indexOf);
					}
					this.sys.authBanner = fileId;
				}

				var logoAccessUrl = this.sys.logoAccessUrl;
				if (this.sys.logoAccessUrl) {
					let fileId = "";
					let paths = logoAccessUrl.split("/");
					let len = 4;
					for (let i = paths.length - 1; i > 0 && len > 0; i--, len--) {
						if (len == 1) {
							fileId = paths[i] + fileId;
							continue;
						}
						fileId = "/" + paths[i] + fileId;
					}
					let indexOf = fileId.indexOf("?");
					if (indexOf != -1) {
						fileId = fileId.substring(0, indexOf);
					}
					this.sys.logoUrl = fileId;
				}

				let res = await this.$API.system.params.editSystemConfigureInfo.put(this.sys);
				if(res.status == 200){
					this.$message.success("操作成功")
				}
				this.loading = false
				this.sysSsSaveing = false
			},

			/*************************** Nacos配置 ***************************/
			/**
			 * 获取nacos配置信息列表
			 */
			async getNacosList(){
				this.nacosLoading = true
				let res = await this.$API.system.params.getNacosList.get();
				this.nacosLoading = false
				if (res.status != 200) {
					return
				}
				this.nacosList = res.data
			},

			/**
			 * 查看Nacoc详情
			 */
			nacosDetails(info){
				this.nacosLoading= false
				this.startEdit= false
				this.nacosSaveLoading= false
				Object.assign(this.nacosInfo, info)
				Object.assign(this.nacosInfoBackups, info)
			},

			/**
			 * 编辑Nacoc信息
			 */
			nacosEdit(){
				this.startEdit = true;
			},

			/**
			 * 取消编辑Nacos信息
			 */
			async nacosCancel() {
				Object.assign(this.nacosInfo, this.nacosInfoBackups)
				this.startEdit = false;
			},

			/**
			 * 保存Nacos信息
			 */
			async nacosSave() {
				this.nacosSaveLoading = true
				let res = await this.$API.system.params.editNacosInfo.put(this.nacosInfo);
				if (res.status == 200) {
					this.$message.success("操作成功")
				} else {
					return;
				}
				Object.assign(this.nacosInfoBackups, this.nacosInfo)
				this.startEdit = false;
				this.nacosSaveLoading = false

				this.getNacosList()
			},

			/**
			 * 新增Nacos信息
			 */
			async nacosAdd() {
				this.showNacosAddPage = true
				this.$nextTick(() => {
					this.$refs.saveDialog.open()
				})
			},

			/**
			 * Nacos配置删除
			 */
			async nacosDelete(row){
				this.$confirm(`确定删除 ${row.dataId} 配置文件吗？`, '提示', {
					type: 'warning'
				}).then(async () => {
					this.nacosLoading = true
					let res = await this.$API.system.params.delNacosInfo.delete({"id":row.id});
					this.getNacosList()
					this.nacosLoading = false
					if (res.status != 200) {
						return ;
					}
					this.$message.success("操作成功")
				}).catch(() => {

				})
			},

			/*************************** 其他配置 ***************************/
			/**
			 * 获取nacos配置信息列表
			 */
			async getOtherList(){
				this.otherLoading = true
				let res = await this.$API.system.params.getOtherList.get();
				this.otherLoading = false
				if (res.status != 200) {
					return
				}
				this.setting = res.data
			},

			/**
			 * 新增空白行
			 */
			table_add(){
				var newRow = {
					category: "",
					key: "",
					value: "",
					type: "json",
					title: "",
					isSet: true
				}
				this.setting.push(newRow)
			},

			cancel(row){
				row.isSet=false;
				if (row.paramsId){
					return ;
				}
				this.setting.pop()
			},


			async table_edit(row) {
				if (row.isSet) {
					if (row.paramsId) {
						//编辑
						let res = await this.$API.system.params.editOtherInfo.put(row);
						if (res.status != 200) {
							return
						}
						this.$message.success("数据修改成功")
					} else {
						// 新增
						let res = await this.$API.system.params.addOtherInfo.post(row);
						if (res.status != 200) {
							return
						}
						this.$message.success("数据新增成功")
					}
					this.getOtherList()
					row.isSet = false
				} else {
					row.isSet = true
				}
			},

			async table_del(row){
				let res = await this.$API.system.params.delOtherInfo.delete({"paramsId": row.paramsId});
				if (res.status != 200) {
					return
				}
				this.getOtherList()
				this.$message.success("数据删除成功")
			},
		}
	}
</script>

<style>
#uploadPictureStyle .el-upload--picture-card{
	height: 100%;
}
#uploadPictureStyle .el-upload{
	justify-content: normal !important;
}

#uploadPictureStyle .el-form-item__content{
	padding-top: 9px;
}

#logoAccessUrlStyle .el-upload{
	justify-content: normal !important;
}
#logoAccessUrlStyle .el-form-item__content{
	padding-top: 9px;
}
.nacosContent .showOrHide{
	display: none;
}
.nacosContent:hover .showOrHide{
		display: block;
}


</style>
